// src/views/Home/Home.js
import React, { Component, Fragment, lazy, Suspense } from 'react';
import { Layout } from "antd"
import { Routes, Route, Link } from 'react-router-dom';
import styles from "./index.module.css"

const { Header, Content, Footer } = Layout
// 使用React的lazy函数动态导入组件
// const DemoA = lazy(() => import(/* webpackChunkName: "DemoA" */ "./demoA"));
// const DemoB = lazy(() => import(/* webpackChunkName: "DemoB" */ "./demoB"));
/* <Suspense fallback={<div>Loading...</div>}>
<Route path="/demoA" component={DemoA} exact />
</Suspense> */
/*我们想要把子页面渲染在 Content 中，所以响应的路由就要放在Content中，这样在路由匹配到 /recommendation时，就会先加载父组件Home，在切换的时候也只会替换 Route 的部分，保留了 Home 页的内容 */
class Home extends Component {
    render() {
        return (
            <Fragment>
                <Header className={styles.header}>
                    <Link to="/main/demoA">DemoA </Link>
                    <Link to="/main/demoB"> DemoB</Link>
                </Header>
                <div class=''>
                    <div class=''>

                    </div>
                    <Content className={styles.content}>

                        {/* <Routes>
                        <Route path="/demoA" component={DemoA} exact />
                        <Route path="/demoB" component={DemoB} />
                    </Routes> */}
                    </Content>
                </div>

                <Footer className={styles.footer}>CopyRight</Footer>
            </Fragment>
        );
    }
}

export default Home;
